<template>
  <div class="app-container banner_page">
    <div v-if="!showEdit" style="padding: 10px;background: #fff;">
      <el-row style="background: #fff;margin-bottom: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
        <el-col :span="22">
          <el-input v-model="aftermarketorderid" placeholder="售后单号搜索" clearable style="width: 200px;" />
          <el-input v-model="username" placeholder="用户搜索" clearable style="width: 120px;" />
          <el-select v-model="type" placeholder="售后类型" style="width: 120px;">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="status" placeholder="售后状态" style="width: 120px;">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div style="padding-top: 10px;">
            <el-button type="primary" @click="getData(1)">搜索</el-button>
          </div>

        </el-col>

      </el-row>
      <el-row style="background: #fff;margin-bottom: 10px;">
        <!-- <el-col :span="22">
          <el-button :disabled="!multipleSelection[0]" @click="dialogCheckVisible = true">审核</el-button>
        </el-col> -->
        <el-col :span="2">
          <div class="total_bar">
            <span>共{{ count }}条</span>
          </div>
        </el-col>

      </el-row>
      <el-table
        ref="multipleTable"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column
          type="selection"
          width="50"
        /> -->
        <el-table-column
          prop="aftermarketorderid"
          label="售后单号"
        />
        <el-table-column
          prop="title"
          label="关联商品"
        />
        <el-table-column
          prop="shopname"
          label="所属门店"
        />
        <el-table-column
          prop="username"
          label="关联用户"
          show-overflow-tooltip
        />
        <el-table-column
          prop="count"
          label="发起售后次数"
          show-overflow-tooltip
        />
        <el-table-column
          prop="type"
          label="售后类型"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ typeOptions.find(item => +scope.row.type === item.value).label }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="售后状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ statusOptions.find(item => +scope.row.status === item.value).label }}
          </template>
        </el-table-column>

        <el-table-column
          prop="address"
          label="操作"
          width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showEditpage(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;align-items: center;justify-content: center;padding: 20px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="20"
          :page-count="total"
          :current-page="pageIdx"
          :total="count"
          @current-change="getData"
        />
      </div>
    </div>
    <div v-else>
      <edit :editdata="addData" :status-options="statusOptions" :type-options="typeOptions" class="edit" />
    </div>
    <!-- 客服审核 START -->
    <!-- <check-dialog :visible.sync="dialogCheckVisible" :aftermarketids="aftermarketids" /> -->
    <!-- 客服审核 END -->
  </div>
</template>

<script>
import { aftermarketIndex } from '@/api/aftermarket'
import edit from './edit.vue'
// import './mock'
export default {
  components: {
    edit
  },
  data() {
    return {
      showEdit: false,
      // dialogCheckVisible: false,
      aftermarketorderid: '', // 售后单号
      // aftermarketids: '',
      username: '', // 用户
      type: '', // 售后类型
      status: '', // 售后状态
      typeOptions: [
        { value: 0, label: '无' },
        { value: 1, label: '需寄回' },
        { value: 2, label: '无需寄回' }
      ],
      statusOptions: [
        { value: 0, label: '全部' },
        { value: 1, label: '待审核' },
        { value: 2, label: '已通过' },
        { value: 3, label: '未通过' },
        { value: 4, label: '售后完成' },
        { value: 5, label: '已取消' },
        { value: 6, label: '资料待填写' },
        { value: 7, label: '待售后完成' }
      ],
      tableData: [],
      multipleSelection: [],
      sealday: '',
      sealreason: [],
      new_integral: '',
      total: 1,
      count: 1,
      pageIdx: 1
    }
  },
  created() {
    // console.log('sessionStorage:' + sessionStorage.getItem('pageIdx'))
    this.getData(this.pageIdx)
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    showEditpage(data) {
      this.showEdit = true
      // console.log(data)
      this.addData = data
      this.$router.push({ query: { 'aftermarketorderid': data.aftermarketorderid }}) // 做url独立链接
    },
    // refresh: 是否刷新列表
    closeEditpage(refresh = false) {
      this.showEdit = false
      if (refresh) {
        const pageNum = localStorage.getItem('pageIdx') || this.pageIdx
        console.log('pageNum:' + pageNum)
        this.getData(pageNum)
      }
    },
    getData(e) {
      console.log('pageIdx:' + e)
      // localStorage.removeItem('pageIdx')
      // sessionStorage.removeItem('pageIdx')
      aftermarketIndex({
        aftermarketorderid: this.aftermarketorderid, // 售后订单号
        username: this.username, // 用户
        type: this.type, // 售后类型
        status: this.status, // 售后状态
        page: e
      }).then(res => {
        const data = res.list
        this.tableData = data.list
        this.count = Number(data.count)
        this.total = Number(data.total)
        localStorage.setItem('pageIdx', e)
        this.pageIdx = parseInt(e)
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log('from, to', from, to)
    next(vm => {
      const queryData = vm.$route.query
      // console.log(queryData.aftermarketorderid)
      if (queryData.aftermarketorderid) {
        aftermarketIndex({
          aftermarketorderid: queryData.aftermarketorderid // 售后订单号
        }).then(res => {
          const _detailData = res.list.list[0]
          // console.log(_detailData)
          vm.showEditpage(_detailData)
        })
      }
    })
  }
}
</script>

<style lang="less" scoped>
.el-row{
	.el-button{
		min-width: 120px;
	}
}

.banner_page{
	position: relative;
	background: #F5F6FA;
}
.total_bar{
		height: 40px;
		line-height: 40px;
	}
	.tab_img{
		width: 20px;
		height: 20px;
	}

</style>
